<!DOCTYPE html>
<html>
<head>
    <title>Trolley and Springs System</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '22px sans-serif';

        // --- Drawing parameters ---
        const ySurface = 350;
        const ySpring = 270; // Vertical centerline for springs and trolley connection

        // --- 1. Draw Surface ---
        ctx.beginPath();
        ctx.moveTo(10, ySurface);
        ctx.lineTo(790, ySurface);
        ctx.stroke();

        // --- 2. Draw Fixed Blocks ---
        const blockWidth = 60;
        const blockHeight = 120;
        const leftBlockX = 10;
        const rightBlockX = 790 - blockWidth;
        ctx.strokeRect(leftBlockX, ySurface - blockHeight, blockWidth, blockHeight);
        ctx.strokeRect(rightBlockX, ySurface - blockHeight, blockWidth, blockHeight);

        // --- 3. Draw Trolley ---
        const trolleyWidth = 200;
        const trolleyHeight = 100;
        const trolleyX = (canvas.width - trolleyWidth) / 2; // Centered
        const wheelRadius = 15;
        const trolleyY = ySurface - (2 * wheelRadius) - trolleyHeight;
        
        // Trolley body
        ctx.strokeRect(trolleyX, trolleyY, trolleyWidth, trolleyHeight);

        // Trolley wheels
        ctx.beginPath();
        ctx.arc(trolleyX + 50, ySurface - wheelRadius, wheelRadius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(trolleyX + trolleyWidth - 50, ySurface - wheelRadius, wheelRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // --- 4. Draw Springs and Connections ---
        const springRadius = 20;
        const numCoils = 12;
        const connLineLength = 20;

        // Helper function to draw a spring using ellipses (mimics the diagram's style)
        function drawSpring(startX, y, length, numCoils, radius) {
            ctx.beginPath();
            const coilWidth = length / numCoils;
            for (let i = 0; i < numCoils; i++) {
                // Draw each coil as an ellipse
                ctx.ellipse(startX + i * coilWidth + coilWidth / 2, y, coilWidth / 2, radius, 0, 0, 2 * Math.PI);
            }
            ctx.stroke();
        }

        // Left spring setup
        const leftSpringAttachPoint = leftBlockX + blockWidth;
        const trolleyLeftAttachPoint = trolleyX;
        const leftSpringStartX = leftSpringAttachPoint + connLineLength;
        const leftSpringEndX = trolleyLeftAttachPoint - connLineLength;
        const leftSpringLength = leftSpringEndX - leftSpringStartX;
        
        // Left connection lines
        ctx.beginPath();
        ctx.moveTo(leftSpringAttachPoint, ySpring);
        ctx.lineTo(leftSpringStartX, ySpring);
        ctx.moveTo(leftSpringEndX, ySpring);
        ctx.lineTo(trolleyLeftAttachPoint, ySpring);
        ctx.stroke();
        
        // Draw left spring
        drawSpring(leftSpringStartX, ySpring, leftSpringLength, numCoils, springRadius);

        // Right spring setup
        const trolleyRightAttachPoint = trolleyX + trolleyWidth;
        const rightSpringAttachPoint = rightBlockX;
        const rightSpringStartX = trolleyRightAttachPoint + connLineLength;
        const rightSpringEndX = rightSpringAttachPoint - connLineLength;
        const rightSpringLength = rightSpringEndX - rightSpringStartX;

        // Right connection lines
        ctx.beginPath();
        ctx.moveTo(trolleyRightAttachPoint, ySpring);
        ctx.lineTo(rightSpringStartX, ySpring);
        ctx.moveTo(rightSpringEndX, ySpring);
        ctx.lineTo(rightSpringAttachPoint, ySpring);
        ctx.stroke();

        // Draw right spring
        drawSpring(rightSpringStartX, ySpring, rightSpringLength, numCoils, springRadius);

        // --- 5. Labels and Pointers ---
        
        // "springs" label
        ctx.textAlign = 'left';
        ctx.fillText('springs', 290, 80);
        ctx.beginPath();
        ctx.moveTo(330, 95); // Common start point for pointers
        ctx.lineTo(210, 250); // Pointer to left spring
        ctx.moveTo(330, 95);
        ctx.lineTo(590, 250); // Pointer to right spring
        ctx.stroke();

        // "trolley" label
        ctx.fillText('trolley', 330, 150);
        ctx.beginPath();
        ctx.moveTo(360, 165);
        ctx.lineTo(380, 220); // Pointer to trolley body
        ctx.stroke();

        // "smooth surface" label
        ctx.textAlign = 'center';
        ctx.fillText('smooth surface', 400, 390);
        ctx.beginPath();
        ctx.moveTo(400, 375);
        ctx.lineTo(400, 355); // Pointer to the surface line
        ctx.stroke();
        
        // "fixed block" (left)
        ctx.fillText('fixed block', 100, 390);
        ctx.beginPath();
        ctx.moveTo(100, 375);
        ctx.lineTo(40, 300); // Pointer to the left block
        ctx.stroke();
        
        // "fixed block" (right)
        ctx.fillText('fixed block', 700, 390);
        ctx.beginPath();
        ctx.moveTo(700, 375);
        ctx.lineTo(760, 300); // Pointer to the right block
        ctx.stroke();

        // --- 6. Caption ---
        ctx.fillText('Fig. 4.1', 400, 430);

    </script>
</body>
</html>